<template>
    <el-form>

        <el-form-item label="用户背景图片">
            <el-image @click="chooseImage" :src="WQ_ADDONS_URL + '/storage/' + design.bg_img">
                <template #placeholder>
                    <div class="image-slot">Loading<span class="dot">...</span></div>
                </template>
                <template #error>
                    <div @click="chooseImage" class="image-slot">
                        <el-icon><icon-picture /></el-icon>
                    </div>
                </template>
            </el-image>
        </el-form-item>

        <el-form-item label="显示盲盒入口">

            <el-switch v-model="design.entry_box" active-value="1" inactive-value="0" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="save"> 保存</el-button>
        </el-form-item>
    </el-form>
<FileManager :FileManagerData="FileManagerData" @express="checkImage"></FileManager>
</template>

<script lang="ts" setup>

import { ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
import axios from 'axios';
import { Picture as IconPicture } from '@element-plus/icons-vue'

import { ElMessage } from 'element-plus';
import FileManager from '../Common/file-manager.vue'

const VITE_URL = window.VITE_URL;
const WQ_ADDONS_URL = window.WQ_ADDONS_URL;
const FileManagerData:any = ref<object>({
    visible: false,
    image: '',
    imageObj: null,
});

const design:any = ref<object>({
    bg_img: '',
    entry_box: '0'
})
const get_customer_center = () => {

    const url: string = VITE_URL + '/admin.design.customer/index';
    axios.get(url).then(res => {

        design.value = res.data

    })
}

get_customer_center();

const save = () => {

    const url: string = VITE_URL + '/admin.design.customer/edit';

    const data = {

        bg_img: design.value.bg_img,
        entry_box: design.value.entry_box,

    };

    axios.post(url, data).then(res => {

        ElMessage({
            
            message: !res.data.status ? '保存成功' : res.data.message,
            duration: 1000,
            type: !res.data.status ? 'success' : 'error',
            
        })

    })

}

const chooseImage = () => {

    console.log('choose image')
    FileManagerData.value.visible = true;
    FileManagerData.value.image = '';
    FileManagerData.value.imageObj = design.value;
}

const checkImage = (data: object) => {

    // console.log(data)
    if (FileManagerData.value.imageObj) {
        FileManagerData.value.imageObj.bg_img = data.image.path
    }


}

</script>

<style>
.el-image {

    width: 200px;
    height: 200px;

}


.el-image .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}

.el-image .image-slot .el-icon {
    font-size: 30px;
}
</style>